<html>
    <head>
        <title>自定义指令</title>
    </head>
    <body>
        <script>
             // 自定义指令
                    // 一、 简介
                            /*
                                除了核心功能默认内值的指令 (v-model 和 v-show)，Vue也"允许注册自定义指令"。
                                注意，在Vue 2.0 中，代码复用和抽象的主要形式是组件。
                                然而，有的情况下，你仍然需要对普通DOM元素进行第二层操作，这时候就会用到"自定义指令"：
                            */
                            // 例如：
                                    //  <input type="text" >
                            /*
                                当页面加载时，该元素将获得焦点(注意：autofocus 在移动版 Safari上不工作)。
                                事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应该还是处于聚焦状态。
                                现在，让我们用指令来实现这个功能：
                            */
                                
                            // 注册一个全局自定义指令 'v-focus'
                                    Vue.directive('focus',{
                                                // 当被绑定的元素插入到DOM中时....
                                                inserted:function(el){
                                                    // 聚焦元素
                                                    el.focus()
                                                }
                                    }) 
                                    
                            // 如果想注册局部指令，组件中也接受一个 directives 的选项：
                                    directives:{
                                        focus:{
                                            // 指令的定义
                                            inserted:function(el){
                                                el.focus()
                                            }
                                        }
                                    }
                            // 然后你可以在模板中任何元素上使用新的 v-focus 指令:
                                    /*
                                        <input v-focus>
                                    */
                
        </script>
    </body>
</html>